import React, { Component } from 'react'
import PropTypes from 'prop-types'

class TodoItem extends Component {

  // 使用构造方法 更改this 指向
  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }

  render() {
    // 运用解构赋值进行代码优化
    const { content, item } = this.props
    return (
      // 子组件通过 this.props进行接收
      <div
        onClick={this.handleClick}>
        {item}-{content}</div >
    )
  }
  // 进行性能优化 因为每次父级render函数执行的时候 子组件的函数的render函数也会被执行
  // 为了提高性能使用 生命周期函数 来判断是否调用render函数 减少性能的损耗
  shouldComponentUpdate(nextProps, nextState) {
    if (nextProps.content !== this.props.content) {
      return true
    } else {
      return false
    }
  }
  // 一个组件要从父组件接受参数
  // 如果这个组件第一次存在于父组件中 不会执行
  // 如果这个组件之前存在于父组件中 才会执行
  componentWillReceiveProps() {
    console.log('数据从父级接受 ')
  }
  // 组件的卸载
  componentWillUnmount() {
    console.log('组件卸载')
  }
  handleClick() {
    // 接收父组件传递过来的方法并且执行 传参
    const { deleteItem, index } = this.props
    deleteItem(index)
    // this.props.deleteItem(this.props.index)
  }
}
// 进行类型检查
TodoItem.propTypes = {
  content: PropTypes.string,
  deleteItem: PropTypes.func
}
// 进行默认值的设定
TodoItem.defaultProps = {
  item: 'hello world'
}
export default TodoItem;